import { motion } from "framer-motion";

function ErrorNotification({ message, onClose }) {
  if (!message) return null;

  return (
    <motion.div
      initial={{ opacity: 0, x: 50 }}
      animate={{ opacity: 1, x: 0 }}
      exit={{ opacity: 0, x: 50 }}
      transition={{ duration: 0.3 }}
      className="fixed top-6 right-6 bg-red-500 text-white px-6 py-3 rounded-lg shadow-lg z-50 font-pixel border-4 border-pink-400 w-80"
    >
      <div className="flex justify-between items-center">
        <p>{message}</p>
        <button
          onClick={onClose}
          className="ml-4 px-3 py-1 border border-white bg-gray-800 shadow-[3px_3px_0_#ff00ff] hover:bg-gray-600 transition"
        >
          X
        </button>
      </div>
    </motion.div>
  );
}

export default ErrorNotification;